﻿<html>
<head>
	<style>
		body{
			margin:0px;
			padding:0px;
		}
		.MainBoard{
			display:block;
			overflow:hidden;
		}
		.Level{
			display:block;
			background-color:gray;
			float:left;
			overflow:hidden;
		}
		.Tab{
			display:block;
			
		}
		.NodeContainer{
			display:block;
			
		}		
		.Node{
			display:inline-block;
			width:170px;
			height:70px;
			border-radius:3px;
			-webkit-box-shadow:1px 1px 1px 1px #000000;
			box-shadow:1px 1px 1px 1px #000000;
			position:relative;
			left:50%;
			top:50%;
			margin-left: -85px;
			margin-top:-35px;
			background-color:#F3E2A9;
			font-size:16pt;
			text-align:center;
		}
		.NodeLabel{
			display:block;
			position:relative;
			margin-left:auto;
			margin-top:23px;;
		}
		.Node:hover{
			background-color:#F5DA81;
		}
		.OffNode{
			background-color:#B2B2AB;
		}
		.OnNode{
			background-color:#FCFF09;
		}
		.VLine{
			display:block;
			background-image: url("hline.jpg");
			background-position: right center;
			background-repeat: repeat-y;
			width:10px;
			position:absolute;
			z-index:9999;
		}
		.HLine{
			display:block;
			background-image: url("vline.jpg");
			background-position: center center;
			background-repeat: repeat-x;
			height:10px;
			position:absolute;
			z-index:9999;
		}
		.VLineWin{
			display:block;
			background-image: url("hlinewin.jpg");
			background-position: right center;
			background-repeat: repeat-y;
			width:10px;
			position:absolute;
			z-index:99999;
		}
		.HLineWin{
			display:block;
			background-image: url("vlinewin.jpg");
			background-position: center center;
			background-repeat: repeat-x;
			height:10px;
			position:absolute;
			z-index:99999;
		}
		.Line:hover{
		}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script type="text/javascript">
	
		function requestMySpecificEntry(entryURI) {
		  myService.getEventsEntry(entryURI, handleMySpecificEntry, handleError);
		}

		function handleMySpecificEntry(retrievedEntryRoot) {
		  myEntryRoot = retrievedEntryRoot; // Global variable for later use
		  alert("This entry's title is: " + retrievedEntryRoot.entry.getTitle().getText());
		}
	
		function iniBoard(jsonData){
			var mainBoard = document.getElementsByTagName("BOARD").item(0);
			var levelCount = jsonData.Levels.length;
			for(var i = 0; i < levelCount; i++){
				var tabs = jsonData.Levels[i].Tabs;
				var htmlLevel = createHTMLLevel(jsonData.Levels[i]);
				htmlLevel.style.width = (100/levelCount)+"%";
				createTag(tabs, htmlLevel);
				mainBoard.appendChild(htmlLevel);
			}
			mainBoard.style.height = jsonData.Levels[0].Tabs.length * 200;
		}
		
		function createHTMLLevel(level){
			var result = document.createElement("LEVEL");
			result.id = "Level"+level.ID;
			
			result.className = "Level";
			return result;
		}
		
		function createTag(tabs, htmlLevel){
			var tabCount = tabs.length;
			for(var i = 0; i < tabCount; i++){
				var tab = tabs[i];
				var htmlTab = createHTMLTag(tab);
				htmlTab.style.height = (100/tabCount)+"%";
				createNode(tab.Nodes, htmlTab);
				htmlLevel.appendChild(htmlTab);
			}
		}
		
		function createHTMLTag(tab){
			var result = document.createElement("TAB");
			result.id = "Tab"+tab.ID;
			result.className = "Tab";
			return result;
		}
		
		function createNode(nodes, htmlTab){
			var nodeCount = nodes.length;
			for(var i = 0; i < nodeCount; i++){
				var node = nodes[i];
				var htmlNode = createHTMLNode(node);
				htmlTab.appendChild(htmlNode);
			}
		}
		
		function createHTMLNode(node){
			var result = document.createElement("NODE");
			result.id = "Node"+node.ID;
			result.className = (node.Win == 1)?"Node OnNode":(node.Win == -1)?"Node OffNode":"Node";
			var labelName = document.createElement("SPAN");
			labelName.innerHTML = node.Name;
			labelName.className = "NodeLabel";
			result.appendChild(labelName);
			var div = document.createElement("DIV");
			div.style.height = (node.End == 1)?"100%":"50%";
			div.className="NodeContainer";
			div.appendChild(result);
			return div;
		}
		
		function drawLine(jsonData){
			var levelCount = jsonData.Levels.length;
			for(var i = 0; i < levelCount; i++){
				if(i+1 == levelCount){
					break;
				}
				var tabs = jsonData.Levels[i].Tabs;
				var tabs2 = jsonData.Levels[i+1].Tabs
				var k = 0;
				var m = 0;

				for(var j = 0; j< tabs.length; j++){
					
					if(j != 0 && j%2 == 0){
						k = k + 1;
						m = 0;
					}
					
					var tab = tabs[j];
					var tab2 = tabs2[k];
					
					var node1 = tab.Nodes[0];
					var node2 = tab.Nodes[1];
					
					var desNode = tab2.Nodes[m]

					drawLineToNode(node1, desNode, true, node1.Win);
					drawLineToNode(node2, desNode, false, node2.Win);
					
					m = m + 1;
				}
			}
		}
		
		function drawLineToNode(formNode, toNode, isHighter, isWin){
			var mainBoard = document.getElementsByTagName("BOARD").item(0);
		
			var lineTop = document.createElement("SPAN");
			lineTop.className = (isWin == 1)?"HLineWin":"HLine";
			
			var lineMid = document.createElement("SPAN");
			lineMid.className = (isWin == 1)?"VLineWin":"VLine";
			
			var lineBottom = document.createElement("SPAN");
			lineBottom.className = (isWin == 1)?"HLineWin":"HLine";
			
			var htmlFNode = document.getElementById("Node"+formNode.ID);
			var htmlTNode = document.getElementById("Node"+toNode.ID);
			
			var posFNode = getPos(htmlFNode);
			var posTNode = getPos(htmlTNode);

			var height = 0
			if(isHighter){
				height = (posTNode.Top+htmlTNode.offsetHeight/2)-(posFNode.Top+htmlFNode.offsetHeight/2) +10;
			}else{
				height = (posFNode.Top+htmlFNode.offsetHeight/2) - (posTNode.Top+htmlTNode.offsetHeight/2) -10;
			}
			lineTop.style.width = (htmlFNode.parentNode.parentNode.offsetWidth - htmlFNode.offsetWidth)/2;
			lineMid.style.height = height;
			
			if(isHighter){
			
				lineTop.style.left = posFNode.Left + htmlFNode.offsetWidth;
				lineTop.style.top = posFNode.Top + htmlFNode.offsetHeight/2 - 5 ;
				document.body.appendChild(lineTop);
				
				lineMid.style.left = lineTop.offsetLeft + lineTop.offsetWidth - 10;
				lineMid.style.top = lineTop.offsetTop;
				document.body.appendChild(lineMid);
				
				lineBottom.style.left = lineMid.offsetLeft;
				lineBottom.style.top = lineMid.offsetTop + lineMid.offsetHeight - 10;
				lineBottom.style.width = posTNode.Left - lineMid.offsetLeft;
				document.body.appendChild(lineBottom);
			}else{
				lineTop.style.left = posFNode.Left + htmlFNode.offsetWidth;
				lineTop.style.top = posFNode.Top + htmlFNode.offsetHeight/2 - 5 ;
				document.body.appendChild(lineTop);
				
				lineMid.style.left = lineTop.offsetLeft + lineTop.offsetWidth - 10;
				lineMid.style.top = lineTop.offsetTop - height;
				document.body.appendChild(lineMid);
				
				lineBottom.style.left = lineMid.offsetLeft;
				lineBottom.style.top = lineMid.offsetTop - 10;
				lineBottom.style.width = posTNode.Left - lineMid.offsetLeft;
				document.body.appendChild(lineBottom);
			}
			
			
		}
		function getPos(el) {
			for (var lx=0, ly=0;
				 el != null;
				 lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
			return {Left: lx,Top: ly};
		}
	</script>
</head>
<body>
	<board class="MainBoard" ></board>
	<script type="text/javascript">
		var data = {
			Name:"Hel cầu lông",
			Levels:[
				{
					ID:1,
					Tabs:[
						{ID:1,Nodes:[{ID:1,Name: "Name A",Win:1},{ID:2, Name: "Name B",Win:-1}]},
						{ID:2,Nodes:[{ID:3,Name: "Name C",Win:-1},{ID:4, Name: "Name D",Win:1}]},
						{ID:3,Nodes:[{ID:5,Name: "Name E",Win:1},{ID:6, Name: "Name F",Win:-1}]},
						{ID:4,Nodes:[{ID:7,Name: "Name G",Win:-1},{ID:8, Name: "Name H",Win:1}]}
					]
				},
				{
					ID:2,
					Tabs:[
						{ID:7,Nodes:[{ID:13,Name: "Name A",Win:-1},{ID:14, Name: "Name D",Win:1}]},
						{ID:8,Nodes:[{ID:15,Name: "Name E",Win:1},{ID:16, Name: "Name H",Win:-1}]}
					]
				},
				{
					ID:3,
					Tabs:[
						{ID:10,Nodes:[{ID:19,Name: "Name D",Win:-1},{ID:20, Name: "Name E",Win:1}]}
					]
				},
				{
					ID:5,
					Tabs:[
						{ID:13,Nodes:[{ID:25,Name: "Name E",End:1,Win:1}]}
					]
				}
			]
		};
		iniBoard(data);
		drawLine(data);
		
		url = "https://spreadsheets.google.com/feeds/cells/0Ahz-LbAMyjo5dEZWZ0taVFlwZXd2aUh3bjlLMk45OEE/od6/public/basic?alt=json-in-script&callback=?";
		$.getJSON(url, function(resp) {
			var entrys = resp.feed.entry;
			console.log(resp);
			console.log(entrys);
			var data = {};

			for(var i = 5; i < entrys.length; i++){
				var cell1 = entrys[i].content;
				var cell2 = entrys[i+1].content;
				var cell3 = entrys[i+2].content;
				var cell4 = entrys[i+3].content;
				var cell5 = entrys[i+4].content;
				var cell6 = entrys[i+5].content;
				var node = {};
				node.ID = cell3;
				node.Name = cell4;
				node.End = cell5;
				node.Win = cell6;
				console.log(node);
				var tab = {};
				tab.ID = cell2;
				tab.Nodes = [2];
				tab.Nodes[node.ID] = node;
				console.log(tab);
				var level = {};
				level.ID = cell1;
				level.Tabs = [10];
				level.Tabs[tab.ID] = tab
				console.log(level);
			}
			console.log(level);
		});
	</script>
</body>
</html>